<script setup>
    const props = defineProps({
        imgUrl: String, 
        title: String,
        price: {
            type: Number,
            default: 999,
        },
        idx: Number})

    // 3.拿到emit函数
    const emit = defineEmits()
    // 4.定义启动函数
    function start() {
        emit("subPrice", props.idx, 1)
    }
</script>

<template>
    <div class="item">
        <img :src="imgUrl"
         :alt="title"
         width="260px">
        <p class="name">{{ title }}</p>
        <p class="price">￥{{ price }}.00<button @click="start">砍一刀</button></p>
        
    </div>
</template>

<style scoped>
    .item {
        width: 270px;
        height: 400px;
        margin: 15px 20px;
        padding: 4px 5px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
        /* 设置修改动画延迟0.5s，更加顺滑 */
        transition: 0.5s;
    }
    .item:hover {
        /* 当鼠标悬浮时，div向上移动4px，更改阴影，并将鼠标样式进行修改 */
        transform: translate3d(0, -4px, 0);
        box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }
    .name {
        height: 3em;
    }
    .price {
        font-size: 20px;
        font-weight: bold;
        color: red;

        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .price button {
        margin: 0 10px;
        width: 60px;
        height: 28px;
        border: none;
        color: rgb(161, 7, 7);
        background-color: #e07979;
        border-radius: 4px;
        /* 设置动态效果 */
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        transition: 0.3s;
        cursor: pointer;
    }
    .price button:hover {
        transform: translate3d(0, -1px, 0);
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.5);  
    }
</style>